<template>
    <div class="recommend-singer">
        <h2 class="title">推荐歌手</h2>
        <div class="singer-list">
            <singer-item
                v-for="item of singers"
                :key="item.id"
                :item="item"
            />
        </div>
    </div>
</template>

<script>
import SingerItem from '@/components/common/singerItem/Index'
export default {
    data() {
        return {
            singers: []
        }
    },
    components: {
        SingerItem
    },
    created() {
    },
    mounted() {
        this.getHotSinger()
    },
    methods: {
        // 获取热门歌手
        async getHotSinger() {
            const { data: res } = await this.$api.getHotSinger()
            if (res.code !== 200) {
                return this.$message.error('获取热门歌手失败！')
            }
            // console.log(res);
            this.singers = res.artists
        },
    },
}
</script>

<style lang="less" scoped>
.recommend-singer {
    .singer-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 30px;
        margin: 0px -15px 0;
    }
}
</style>